<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
    <title>首页</title>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../iconfont/iconfont.css" />
    <style>
		.mui-slider img {
			max-width: 100%;
			height: 140px;
		}
		/*推荐分类  开始*/
		.featured-categories {
			border-bottom: 1px solid #DCDCDC;
			font-size: 13px;
			line-height: 22px;
		}
		.featured-categories img,
		.featured-categories .iconfont {
			display: block;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			color: #fff;
			font-size: 20px;
			text-align: center;
			line-height: 50px;
			margin: 0 auto;
		}
		.icon-color-tuijian {
			background: #F44542;
		}
		/*推荐分类  结束*/
		
		/*广告区域 开始*/
		.ad .big-thumb,
		.ad .small-thumb {
			text-align: center;
		}
		.ad.one-three {
			margin-top: 10px;
			margin-bottom: 5px;
		}
		.ad.one-three .small-thumb {
			max-width: 70px;
			max-height: 100%;
		}
		.ad.one-three>div:first-child img {
			width: 100%;
			height: 210px;
			margin-top: 5px;
		}
		.ad.one-three>div:last-child {
			padding-left: 10px;
		}
		.ad.one-three .text-gray {
			font-size: 13px;
		}
		.ad.one-three .ad-title {
			padding-top: 15px;
		}
		.ad.one-three .ad-title,
		.ad.one-three .ad-desc {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.ad.one-three > div:last-child > div {
			height: 73px;
			border-bottom: 1px solid #DCDCDC;
		}
		.ad.one-three > div:last-child > div:last-child {
			border-bottom: none;
		}
		
		.ad.one-row {
			border-top: 1px solid #EEEEEE;
			height: 110px;
			word-break: break-all;
			overflow: hidden;
		}
		.ad.one-row .big-thumb {
			height: 100px;
			padding-right: 5px;
		}
		.ad.one-row .big-thumb img {
			width: 100%;
			height: 100%;
		}
		.ad.one-row .ad-desc {
			font-size: 12px;
		}
		.ad.one-four > div:first-child {
			height: 165px;
		}
		.ad.one-four .big-thumb {
			height: 200px;
		}
		.ad.one-four .big-thumb img {
			width: 100%;
			height: 100%;
		}
		.ad.one-four .small-thumb {
			height: 100px;
			padding-left: 2px;
		}
		.ad.one-four .small-thumb img {
			width: 100%;
			height: 100%;
		}
		.ad.one-four .gap {
			height: 5px !important;
		}
		.ad.one-four .mui-row>div {
			margin: 0;
			vertical-align: middle;
			height: 80px;
		}
		.ad.one-one .mui-col-xs-6 {
			padding-left: 3px;
			padding-right: 3px;
		}
		.ad.one-one .small-thumb {
			max-width: 100%;
			width: 100%;
			height: 80px;
		}
		.ad.one-one .gap {
			height: 5px;
		}
		.ad.one-two-up-down .big-thumb {
			text-align: center;
			height: 200px;
		}
		.ad.one-two-up-down .big-thumb img {
			width: 100%;
			height: 100%;
		}
		.ad.one-two-up-down .small-thumb {
			text-align: center;
			height: 100px;
			padding-left: 5px;
		}
		.ad.one-two-up-down .small-thumb img {
			width: 100%;
			height: 100%;
		}
		.ad.one-two-up-down .mui-col-xs-6 > div:first-child {
			padding-bottom: 2px;
		}
		.ad.one-two-up-down .mui-col-xs-6 > div:last-child {
			padding-top: 2px;
		}
		/*广告区域 结束*/
		
		.home-hr {
			background: linear-gradient(#fff 49%, #e8e8e8 1%, #fff 50%);
			;
			color: #272727;
		}
		
		.home-hr .icon-1373zhuanti,
		.home-hr .icon-huodong,
		.home-hr .icon-tubiao {
			background: #FC3A2E;
			color: #fff;
			border-radius: 50%;
			padding: 3px;
			font-size: 14px;
			line-height: 20px;
			text-align: center;
			-webkit-font-smoothing: antialiased;
		}
		
		.icon-zhuzhuangtu, .icon-zanfill {
			color: #c81540;
		}
		
		/*热门商品 开始*/
		.hot-product {
			margin-bottom: 10px;
			padding-bottom: 10px;
		}
		.hot-product-img img {
			width: 100%;
		}
		.hot-product-des {
			padding-left: 10px;
		}
		.hot-product-key {
			border-bottom: 1px solid #DCDCDC;
		}
		.hot-product-btn span {
			border-color: #FC3A2E;
			vertical-align: middle;
		}
		.hot-product-btn button {
			height: 30px;
			line-height: 30px;
			padding: 0 10px;
		}
		/*热门商品 结束*/
		
		/*热门专题 热门活动 开始*/
		.hot-topics, .hot-activities {
			width: 100%;
			background-color: #FFFFFF;
			padding: 10px;
			text-align: center;
		}
		.topic, .activity {
			height: 150px;
			margin: 10px auto;
			text-align: center;
		}
		.topic:first-child, .activity:first-child {
			margin-top: 0;
		}
		.topic:last-child, .activity:last-child {
			margin-bottom: 0;
		}
		.topic img, .activity img {
			width: 100%;
			max-height: 100%;
			border-radius: 10px;
		}
		.topic .word, .activity .word {
			background: rgba(255, 255, 255, 0.5);
			width: 200px;
			min-height: 40px;
			margin-top: -120px;
			position: absolute;
			left: 80px;
		}
		.topic .title,
		.activity .title {
			font-size: 18px;
			color: #4C4E50;
		}
		.topic .desc,
		.activity .desc {
			font-size: 13px;
			color: #4C4E50;
		}
		.topic .title, .topic .desc,
		.activity .title, .activity .desc {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		/*热门专题 热门活动 结束*/
	</style>
</head>
<body>
	<!--数据列表 开始-->
	<div class="mui-content mui-scroll-wrapper container-pull-refresh no-pad">
		<div class="mui-scroll">
			<!--数据列表-->
			<section class="mui-table-view mui-row scroll-data" data-tpl="tpl-template">
				<!-- 顶部导航 开始 -->
				<header class="header mui-bar mui-bar-nav bar mui-text-center">
					<span class="mui-pull-left pad-h-md text-primary app-name">
						童星桌椅
					</span>
					<a class="title"></a>
					<a class="mui-pull-right pad-h-md text-gray" data-url="product.search.html">
						<i class="iconfont icon-sousuo2"></i>
					</a>
				</header>
				<!-- 顶部导航 结束 -->
				
				<!--轮播图 开始-->
				<div id="slider" class="mui-slider" >
					<div class="mui-slider-group mui-slider-loop">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="../image/home.png">
							</a>
						</div>
					</div>
				</div>
				<!--轮播图 结束-->
				
				<!--分类推荐 开始-->
				<div class="mui-row mui-text-center white pad-v featured-categories">
				</div>
				<!--分类推荐 结束-->
				
				<div class="pad-v-sm"></div>
				<!--广告区域 开始-->
				<div id="ad-area">
				</div>
				<!--广告区域 结束-->
				
				<div class="pad-v-sm"></div>
				<!--热门商品 开始-->
				<div class="white pad-v mui-text-center home-hr">
					 <div class="mgn-h-auto white mui-inline pad-h-sm">
					 	<i class="iconfont icon-tubiao"></i>
					 	<strong>热门商品</strong>
					 	<label class="text-gray">热卖好货必须哄抢</label>
					 </div>
				</div>
				<div class="mui-row mui-text-center white pad-v hot-products">
				</div>
				<!--热门商品 结束-->
				
				<div class="pad-v-sm"></div>
				<!--热门专题 开始-->
				<div class="mui-row white pad-v mui-text-center home-hr">
					 <div class="mgn-h-auto white mui-inline pad-h-sm">
					 	<i class="iconfont icon-huodong"></i>
					 	<strong>热门专题</strong>
					 	<label class="text-gray">热卖好货必须哄抢</label>
					 </div>
				</div>
				<div class="hot-topics">
				</div>
				<!--热门专题 结束-->
				
				<div class="pad-v-sm"></div>
				<!--热门活动 开始-->
				<div class="mui-row white pad-v mui-text-center home-hr">
					 <div class="mgn-h-auto white mui-inline pad-h-sm">
					 	<i class="iconfont icon-huodong"></i>
					 	<strong>热门活动</strong>
					 	<label class="text-gray">热卖好货必须哄抢</label>
					 </div>
				</div>
				<div class="hot-activities">
				</div>
				<!--热门活动 结束-->
			</section>
		</div>
	</div>
	<!--数据列表 结束-->
	
	<!-- 商品轮播图片模板 开始 -->
	<script type="text/html" id="tpl-banner-slider">
		{{if data.slide && data.slide.length > 0}}
		<div class="mui-slider-group mui-slider-loop">
			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="javascript:;">
					<img src="{{image(data.slide[data.slide.length-1].image, '_0_200')}}" data-type="{{data.slide[data.slide.length-1].type}}" data-value="{{data.slide[data.slide.length-1].type_val}}" />
				</a>
			</div>
			{{each data.slide as item idx}}
			<div class="mui-slider-item">
				<a href="javascript:;">
					<img src="{{image(item.image, '_0_200')}}" data-type="{{item.type}}" data-value="{{item.type_val}}" />
				</a>
			</div>
			{{/each}}
			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="javascript:;">
					<img src="{{image(data.slide[0].image, '_0_200')}}" data-type="{{data.slide[0].type}}" data-value="{{data.slide[0].type_val}}" />
				</a>
			</div>
		</div>
		{{/if}}
	</script>
	<!-- 商品轮播图片模板 结束 -->
	
	<!-- 商品分类模板 开始 -->
	<script type="text/html" id="tpl-category-row">
		{{each data.category as item}}
		<div class="mui-col-xs-3 category" data-id="{{item.category_id}}">
			<div class="mui-text-center">
				<img src="{{image(item.icon, '_100_100')}}" />
			</div>
			<div>{{item.category_name}}</div>
		</div>
		{{/each}}
		<div class="mui-col-xs-3 more-category">
			<div class="mui-text-center">
				<i class="iconfont icon-shumiao icon-color-tuijian"></i>
			</div>
			<div>更多推荐</div>
		</div>
	</script>
	<!-- 商品分类模板 结束 -->
	
	<!-- 热门商品 开始 -->
	<script type="text/html" id="tpl-hot-product">
		{{each data.hot_goods as item}}
		<div class="white hot-product" data-id="{{item.id}}">
			<div class="hot-product-img">
				<img class="" src="{{image(item.thumb, '_600_0')}}" />
			</div>
			<div class="hot-product-des">
				<div class="pad-v hot-product-key">
					{{item.title}}
				</div>
				<div class="text-gray pad-v">
					{{item.description}}
				</div>
			</div>
			<div class="hot-product-btn pad-h-md mui-text-left">
				<span class="bdr rds text-primary pad">
					￥{{item.goods_price | price}}
					<del class="text-gray mgn-h">￥{{item.goods_market_price | price}}</del>
				</span>
				<div class="mui-pull-right">
					<button class="text-gray no-mgn btn-awesome mui-hidden">
						<i class="iconfont icon-down">{{item.like}}</i>
					</button>
					<button class="text-gray no-mgn btn-view-detail">
						<i class="iconfont icon-feiji"></i>
					</button>
				</div>
			</div>
		</div>
		{{/each}}
	</script>
	<!-- 热门商品 结束 -->
	
	<!-- 热门专题 开始 -->
	<script type="text/html" id="tpl-hot-topic">
		{{each data.hot_special as item}}
		<div class="topic" data-id="{{item.id}}">
			<img src="{{image(item.thumb, '_600_0')}}" />
			<div class="word pad-v-md pad-h rds">
				<div class="title">{{item.title}}</div>
				<div class="desc">{{item.description}}</div>
			</div>
		</div>
		{{/each}}
	</script>
	<!-- 热门专题 结束 -->
	
	<!-- 热门活动 开始 -->
	<script type="text/html" id="tpl-hot-activity">
		{{each data.hot_activity as item}}
		<div class="activity" data-id="{{item.id}}">
			<img src="{{image(item.thumb, '_600_0')}}" />
			<div class="word pad-v-md pad-h rds">
				<div class="title">{{item.title}}</div>
				<div class="desc">{{item.description}}</div>
			</div>
		</div>
		{{/each}}
	</script>
	<!-- 热门活动 结束 -->
	
	
	<!--广告区域模板 开始-->
	<script type="text/html" id="tpl-ad">
		{{if 'one_three' == data.ad.show_type}}
		<div class="ad one-three white mui-row">
			<div class="mui-col-xs-6">
				{{if data.ad.image_ad}}
				<img src="{{image(data.ad.image_ad.image, '_0_300')}}" data-type="{{data.ad.image_ad.type}}" data-value="{{data.ad.image_ad.type_val}}"/>
				{{/if}}
			</div>
			<div class="mui-col-xs-6">
				{{each data.ad.ad as item idx}}
				{{if idx < 3}}
				<div class="pad-v-sm" data-type="{{item.type}}" data-value="{{item.type_val}}">
					<img class="mui-pull-right mgn-h-sm small-thumb" src="{{image(item.image, '_100_100')}}" />
					<div class="ad-title">{{item.title}}</div>
					<div class="ad-desc text-gray">{{item.description}}</div>
				</div>
				{{/if}}
				{{/each}}
			</div>
		</div>
		{{else if 'one_row' == data.ad.show_type}}
		{{each data.ad.ad as item idx}}
		<div class="ad one-row white mui-row pad-v-sm">
			<div class="mui-col-xs-4 big-thumb">
				<img src="{{image(item.image, '_100_100')}}" />
			</div>
			<div class="mui-col-xs-8" data-type="{{item.type}}" data-value="{{item.type_val}}">
				<div class="ad-title">{{item.title}}</div>
				<div class="ad-desc text-gray">{{item.description}}</div>
			</div>
		</div>
		{{/each}}
		{{else if 'one_four' == data.ad.show_type}}
		<div class="ad one-four white mui-row">
			<div class="mui-col-xs-6 big-thumb" data-type="{{data.ad.image_ad.type}}" data-value="{{data.ad.image_ad.type_val}}">
				<img src="{{image(data.ad.image_ad.image, '_200_200')}}" />
			</div>
			<div class="mui-col-xs-6">
				<div class="mui-row">
					{{each data.ad.ad as item idx}}
					{{if idx > 1 && 0 == idx%2 && idx != data.ad.ad.length}}
					<div class="mui-col-xs-12 gap"></div>
					{{/if}}
					{{if idx < 4}}
					<div class="mui-col-xs-6 small-thumb" data-type="{{item.type}}" data-value="{{item.type_val}}">
						<img src="{{image(item.image, '_100_100')}}" />
					</div>
					{{/if}}
					{{/each}}
				</div>
			</div>
		</div>
		{{else if 'one_one' == data.ad.show_type}}
		<div class="ad one-one white mui-row">
			{{each data.ad.ad as item idx}}
			{{if 0 == idx%2 && idx != data.ad.ad.length}}
			<div class="mui-col-xs-12 gap"></div>
			{{/if}}
			<div class="mui-col-xs-6 mui-text-center" data-type="{{item.type}}" data-value="{{item.type_val}}">
				<img class="small-thumb" src="{{image(item.image, '_0_100')}}" />
			</div>
			{{/each}}
		</div>
		{{else if 'one_two_up_down' == data.ad.show_type}}
		<div class="ad one-two-up-down white mui-row">
			<div class="mui-col-xs-6 big-thumb">
				{{if data.ad.image_ad}}
				<img src="{{image(data.ad.image_ad.image, '_200_200')}}" data-type="{{data.ad.image_ad.type}}" data-value="{{data.ad.image_ad.type_val}}"/>
				{{/if}}
			</div>
			<div class="mui-col-xs-6">
				{{each data.ad.ad as item idx}}
				{{if idx < 2}}
				<div class="small-thumb" data-type="{{item.type}}" data-value="{{item.type_val}}">
					<img src="{{image(item.image, '_200_0')}}" />
				</div>
				{{/if}}
				{{/each}}
			</div>
		</div>
		{{/if}}
	</script>
	<!--广告区域模板 开始-->
	
	<script type="text/javascript" src="../js/mui.min.js" ></script>
	<script type="text/javascript" src="../js/jquery.min.js" ></script>
	<script type="text/javascript" src="../js/template.js" ></script>
	<script type="text/javascript" src="../js/app.js" ></script>
	<script type="text/javascript" src="home.js" ></script>
</body>
</html>